Blogger Template Magazine Style : Portal Magajah

0

Share

Blogger template Portal Magajah is magazine style template with feature content image slider and 4 column in main post. This is my blogger template after Ireng Manis template.

Here is the screenshot


For this time, you can see the demo live. Download link not available at this time.

Setting template Portal Magajah

1. Setting top nav

Go to layout > Edit HTML and find this code

<div class='nav'>
<ul>
<li><a expr:href='data:blog.homepageUrl' title='Take me home'>Home</a></li>
<li><a href='YOUR-LINK-HERE' title='About us'>About</a></li>
<li><a href='YOUR-LINK-HERE' title='Contact us'>Contact</a></li>
</ul>
</div>

Change YOUR-LINK-HERE with yours


2. Setting menu

Go to layout > Edit HTML and find this code

<div class='menu'>
<ul>
<li><a href='YOUR-LINK-HERE' title='Edit Me'>Edit Me</a></li>
<li><a href='YOUR-LINK-HERE' title='Edit Me'>Edit Me</a></li>
<li><a href='YOUR-LINK-HERE' title='Edit Me'>Edit Me</a></li>
<li><a href='YOUR-LINK-HERE' title='Edit Me'>Edit Me</a></li>
</ul>
</div>

Change red color with yours


3. Setting Adsense 927 x 90

Go to layout > Edit HTML and find this code

<!-- Adsense Top 729px X 90px -->

--- your Adsense code here ----


4. Setting Adsense 160 x 60 (left sidebar in single post)

Go to Layout > Edit HTML > click Expand Widget Templates and find this code

<span class="adsense">
<!-- Adsense Left -->

--- your Adsense code here ----


5. Setting image author

Go to Layout > Edit HTML and find this code

.mypic {
background: url(http://2.bp.blogspot.com/_aAjcAMHOGT4/S4qRsv7P8BI/AAAAAAAACBc/k5w30_BFxFM/s1600/ireng%2Bajah.jpg) no-repeat;
float: left;
width: 50px;
height: 50px;

Change the red color with url your image. Size image is 50 x 50


6. Setting Feature Content
Go to Layout > click Edit Feature Content widget. Copy and paste these code below

<div class="jflow-content-slider">
<div id="slides">
<div class="slide-wrapper">
<div class="slide-thumbnail">
<a href="YOUR-LINK-HERE" title="Edit Me"><img width="200" alt="#" src="IMAGE-URL-HERE" height="180" /></a>
</div>
<div class="slide-details">
<h3>TITLE-HERE</h3>
<div class="description">
Short description here
</div>
</div>
<div class="clear"></div>
</div>

<div class="slide-wrapper">
<div class="slide-thumbnail">
<a href="YOUR-LINK-HERE" title="Edit Me"><img width="200" alt="#" src="IMAGE-URL-HERE" height="180" /></a>
</div>
<div class="slide-details">
<h3>TITLE-HERE</h3>
<div class="description">
Short description here
</div>
</div>
<div class="clear"></div>
</div>

</div>

<div id="myController">
<span class="jFlowPrev">Prev</span>
<span class="jFlowControl">1</span>
<span class="jFlowControl">2</span>
<span class="jFlowNext">Next</span>
</div>
<div class="clear"></div>
</div>

Change the red color with yours.

*That is sample for 2 images content.

Feature content by Webdesignbooth


Thanks


ireng_ajah